<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="../../../common/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
<jsp:include page="../../../common/head.jsp"></jsp:include>
<script type="text/javascript" src="${ctx}/common/jquery/farbtastic/farbtastic.js"></script>
<link rel="stylesheet" href="${ctx}/common/jquery/farbtastic/farbtastic.css" type="text/css"></link>
<script language="javascript">
	function saveinfo()
	{
		var objarr = new Array(
			["reportDetail.titleFontSize","标题字体大小","notEmpty",""],
			["reportDetail.titleFontSize","标题字体大小","int","2"],
			["reportDetail.titleColor","标题字体颜色","max","String:20"],
			["reportDetail.titleBgColor","标题背景色","max","String:20"],
			["reportDetail.dataFontSize","数据列字体大小","notEmpty",""],
			["reportDetail.dataFontSize","数据列字体大小","int","4"],
			["reportDetail.dataColor","数据列字体颜色","max","String:20"],
			["reportDetail.cellWidth","列宽增减","int","4"],
			["reportDetail.dataBgColor","数据列背景颜色","max","String:20"]
		);
	
		if(xj.CheckAll(objarr))
		{
			if(confirm("确认保存？"))
				return true;
			else
				return false
		}
		else
			return false;
	}
	var nowId = "";
	function useCustomBgColor(varid)
	{
		$("#colorPicker_"+nowId).css("display","none");
		nowId = varid;
		var offset = $("#"+varid).offset();
		if($('#'+varid).val()=="")
			$('#'+varid).val("#ffffff")
		$('#colorPicker_'+varid).farbtastic('#'+varid);//关联上
		$("#colorPicker_"+varid).css({ 
			'left':offset.left-100, 
			'top':offset.top+20,
			'display':'block'
			}); 
		$('#colorPicker_'+varid).offset().left=offset.left;
		$('#colorPicker_'+varid).offset().top=offset.top+30;
	}
	//验证格式化内容
	function checkPattern(obj)
	{
		var str = $("#dataType").find("option:selected").val();
		if(str=="Date"||str=="Double")
		{
			if(obj=="")
				return "请输入格式化字符";
		}
		return "";			
	}
	document.onclick=function(e){
		var e= e||event;
		var o=e["target"]||e["srcElement"];
		if(nowId!="")
		{
			if($("#colorPicker_"+nowId).css("display")=="block"&&o.tagName!="DIV"&&o.name!="reportDetail.titleColor"&&o.name!="reportDetail.dataColor"&&o.name!="reportDetail.titleBgColor"&&o.name!="reportDetail.dataBgColor")
			{
				$("#colorPicker_"+nowId).css("display","none");
				nowid="";
			}
		}

	}
</script>

<title>样式调整</title>
</head>
<body>
<form action="updateStyleDetailReportEngine.do" method="post" name="form1" onsubmit="return saveinfo()">
<div id="body_div">
	<w:ShowTitle name="报表样式批量调整">
	<w:TitleButton funcName="保存" onClickFunction="" urlImg="${ctx}/images/main/save.png" funcType="submit"/>
	</w:ShowTitle>
<div id="body_content">
	<input type="hidden" name="reportIds" value="${reportIds}"/>
	
	<table width="100%">
		<tr>
			<td class="left_align" colspan="6">标题样式</td>
		</tr>
		<tr>
			<td class="right_align">字体</td>
			<td class="left_align">
				<w:select name="reportDetail.titleFont" value="${reportDetail.titleFont}">
					<w:option optionValue="宋体" optionLabel="宋体"></w:option>
				</w:select>
			</td>
			<td class="right_align">字号</td>
			<td class="left_align">
				<input type="text" name="reportDetail.titleFontSize" value="${reportDetail.titleFontSize}"/>
			</td>
			<td class="right_align">字体颜色</td>
			<td class="left_align"><input type="text" name="reportDetail.titleColor" id="titleColor" value="${reportDetail.titleColor}" onclick="useCustomBgColor('titleColor')" style="background-color:${reportDetail.titleColor}"/>
			</td>
		</tr>
		<tr>
			<td class="right_align">粗体</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.titleBold" value="true" serverValue="${reportDetail.titleBold}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.titleBold" value="false" serverValue="${reportDetail.titleBold}"></w:radio>否
			</td>
			<td class="right_align">斜体</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.titleTialic" value="true" serverValue="${reportDetail.titleTialic}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.titleTialic" value="false" serverValue="${reportDetail.titleTialic}"></w:radio>否
			</td>
			<td class="right_align">下划线</td>
			<td class="left_align">
				<w:select name="reportDetail.titleUnderline" value="${reportDetail.titleUnderline}">
					<w:option optionValue="0" optionLabel="无"></w:option>
					<w:option optionValue="1" optionLabel="单线"></w:option>
					<w:option optionValue="2" optionLabel="双线"></w:option>
					<w:option optionValue="33" optionLabel="会计式单线"></w:option>
					<w:option optionValue="34" optionLabel="会计式双线"></w:option>
				</w:select>
			</td>
		</tr>
		<tr>
			<td class="right_align">背景颜色</td>
			<td class="left_align">
				<input type="text" name="reportDetail.titleBgColor" id="titleBgColor" value="${reportDetail.titleBgColor}" onclick="useCustomBgColor('titleBgColor')" style="background-color:${reportDetail.titleBgColor}"/>
			</td>
			<td class="right_align">横向对齐方式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleAlign" value="${reportDetail.titleAlign}">
					<w:option optionValue="0" optionLabel="常规"></w:option>
					<w:option optionValue="1" optionLabel="左对齐"></w:option>
					<w:option optionValue="2" optionLabel="居中"></w:option>
					<w:option optionValue="3" optionLabel="右对齐"></w:option>
					<w:option optionValue="4" optionLabel="填充"></w:option>
					<w:option optionValue="5" optionLabel="两端对齐"></w:option>
				</w:select>
			</td>
			<td class="right_align">纵向对齐方式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleValign" value="${reportDetail.titleValign}">
					<w:option optionValue="0" optionLabel="上"></w:option>
					<w:option optionValue="1" optionLabel="居中"></w:option>
					<w:option optionValue="2" optionLabel="下"></w:option>
					<w:option optionValue="3" optionLabel="两端对齐"></w:option>
				</w:select>
			</td>
		</tr>
		<tr>
			<td class="right_align">左边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleLeftBorder" value="${reportDetail.titleLeftBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">右边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleRightBorder" value="${reportDetail.titleRightBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">自动换行</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.titleWrap" value="true" serverValue="${reportDetail.titleWrap}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.titleWrap" value="false" serverValue="${reportDetail.titleWrap}"></w:radio>否
			</td>
		</tr>
		<tr>
			<td class="right_align">上边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleUpBorder" value="${reportDetail.titleUpBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">下边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.titleDownBorder" value="${reportDetail.titleDownBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td>列宽增减</td>
			<td class="left_align">
			<input type="text" name="reportDetail.cellWidth" value=""/>
			</td>
		</tr>
		<tr>
			<td class="left_align" colspan="6">数据列样式</td>
		</tr>
		<tr>
			<td class="right_align">字体</td>
			<td class="left_align">
				<w:select name="reportDetail.dataFont" value="${reportDetail.dataFont}">
					<w:option optionValue="宋体" optionLabel="宋体"></w:option>
				</w:select>
			</td>
			<td class="right_align">字号</td>
			<td class="left_align">
				<input type="text" name="reportDetail.dataFontSize" value="${reportDetail.dataFontSize}"/>
			</td>
			<td class="right_align">字体颜色</td>
			<td class="left_align"><input type="text" name="reportDetail.dataColor" id="dataColor" value="${reportDetail.dataColor}" onclick="useCustomBgColor('dataColor')" style="background-color:${reportDetail.dataColor}"/>
			</td>
		</tr>
		<tr>
			<td class="right_align">粗体</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.dataBold" value="true" serverValue="${reportDetail.dataBold}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.dataBold" value="false" serverValue="${reportDetail.dataBold}"></w:radio>否
			</td>
			<td class="right_align">斜体</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.dataTialic" value="true" serverValue="${reportDetail.dataTialic}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.dataTialic" value="false" serverValue="${reportDetail.dataTialic}"></w:radio>否
			</td>
			<td class="right_align">下划线</td>
			<td class="left_align">
				<w:select name="reportDetail.dataUnderline" value="${reportDetail.dataUnderline}">
					<w:option optionValue="0" optionLabel="无"></w:option>
					<w:option optionValue="1" optionLabel="单线"></w:option>
					<w:option optionValue="2" optionLabel="双线"></w:option>
					<w:option optionValue="33" optionLabel="会计式单线"></w:option>
					<w:option optionValue="34" optionLabel="会计式双线"></w:option>
				</w:select>
			</td>
		</tr>
		<tr>
			<td class="right_align">背景颜色</td>
			<td class="left_align">
				<input type="text" name="reportDetail.dataBgColor" id="dataBgColor" value="${reportDetail.dataBgColor}" onclick="useCustomBgColor('dataBgColor')" style="background-color:${reportDetail.dataBgColor}"/>
			</td>
			<td class="right_align">横向对齐方式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataAlign" value="${reportDetail.dataAlign}">
					<w:option optionValue="0" optionLabel="常规"></w:option>
					<w:option optionValue="1" optionLabel="左对齐"></w:option>
					<w:option optionValue="2" optionLabel="居中"></w:option>
					<w:option optionValue="3" optionLabel="右对齐"></w:option>
					<w:option optionValue="3" optionLabel="填充"></w:option>
					<w:option optionValue="3" optionLabel="两端对齐"></w:option>
				</w:select>
			</td>
			<td class="right_align">纵向对齐方式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataValign" value="${reportDetail.dataValign}">
					<w:option optionValue="0" optionLabel="上"></w:option>
					<w:option optionValue="1" optionLabel="居中"></w:option>
					<w:option optionValue="2" optionLabel="下"></w:option>
					<w:option optionValue="3" optionLabel="两端对齐"></w:option>
				</w:select>
			</td>
		</tr>
		<tr>
			<td class="right_align">左边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataLeftBorder" value="${reportDetail.dataLeftBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">右边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataRightBorder" value="${reportDetail.dataRightBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">自动换行</td>
			<td class="left_align">
				<w:radio styleClass="radio" name="reportDetail.dataWrap" value="true" serverValue="${reportDetail.dataWrap}"></w:radio>是
				<w:radio styleClass="radio" name="reportDetail.dataWrap" value="false" serverValue="${reportDetail.dataWrap}"></w:radio>否
			</td>
		</tr>
		<tr>
			<td class="right_align">上边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataUpBorder" value="${reportDetail.dataUpBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align">下边框样式</td>
			<td class="left_align">
				<w:select name="reportDetail.dataDownBorder" value="${reportDetail.dataDownBorder}">
					<w:option optionValue="0" optionLabel="NONE"></w:option>
					<w:option optionValue="1" optionLabel="THIN"></w:option>
					<w:option optionValue="2" optionLabel="MEDIUM"></w:option>
					<w:option optionValue="3" optionLabel="DASHED"></w:option>
					<w:option optionValue="4" optionLabel="DOTTED"></w:option>
					<w:option optionValue="5" optionLabel="THICK"></w:option>
					<w:option optionValue="6" optionLabel="DOUBLE"></w:option>
					<w:option optionValue="7" optionLabel="HAIR"></w:option>
					<w:option optionValue="8" optionLabel="MEDIUM_DASHED"></w:option>
					<w:option optionValue="9" optionLabel="DASH_DOT"></w:option>
					<w:option optionValue="10" optionLabel="MEDIUM_DASH_DOT"></w:option>
					<w:option optionValue="11" optionLabel="DASH_DOT_DOT"></w:option>
					<w:option optionValue="12" optionLabel="MEDIUM_DASH_DOT_DOT"></w:option>
					<w:option optionValue="13" optionLabel="SLANTED_DASH_DOT"></w:option>
				</w:select>
			</td>
			<td class="right_align"></td>
			<td class="left_align">
			</td>
		</tr>
	</table>
	<div id="colorPicker_titleColor" style="display:none;position:absolute;z-index:999;left:200;top:200;"></div>
	<div id="colorPicker_titleBgColor" style="display:none;position:absolute;z-index:999;left:200;top:200;"></div>
	<div id="colorPicker_dataColor" style="display:none;position:absolute;z-index:999;left:200;top:200;"></div>
	<div id="colorPicker_dataBgColor" style="display:none;position:absolute;z-index:999;left:200;top:200;"></div>
</div>
</div>
</form>
</body>
</html>
